<template>
	<view class="box">
		<view class="cancel" @click="show=true">
			取消收藏
		</view>
		<u-checkbox-group v-model="checkboxValue">
			<view class="li-box">
				<view class="li" v-for="item in list" :key="item.goods_id">
					<view class="left">
						<u-checkbox :name="item.goods_id" shape="circle" activeColor="#fb8b06" size="40rpx"></u-checkbox>
					</view>
					<image :src="item.original_img" class="img" mode="aspectFit"></image>
					<view class="right">
						<view class="title twoline-hide">
							{{item.goods_name}}
						</view>
						<view class="vtitle">
							{{item.add_time}}
						</view>
						<view class="btitle">
							共{{item.sales_num}}个文件
						</view>
					</view>
				</view>
				<u-empty v-if="list.length<1" mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" textSize="30rpx"
					width="360" height="380" text="收藏空空如也...">
				</u-empty>
			</view>
		</u-checkbox-group>
		<view class="btn">
			<view class="left">
				<u-checkbox-group @change="hdAll">
					<u-checkbox shape="circle" name="all" labelSize="30rpx" activeColor="#fb8b06" label="全选"
						size="40rpx"></u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="submit" @click="pushList">
				添加待打印
			</view>
		</view>
		<u-modal :show="show" showCancelButton title="提示" @cancel="show=false" @close="show=false" @confirm="submit"
			content='你确定继续操作吗?'></u-modal>
	</view>
</template>

<script>
	import {
		StudyApi,
		UserApi
	} from '@/api';
	export default {
		data() {
			return {
				list: [],
				p: 1,
				checkboxValue: [],
				show: false
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			// 获取列表
			async getList(bol = true) {
				try {
					const res = await UserApi.getCollect({
						p: this.p,
						size: 10
					})
					if (bol)
						return this.list = res.result.rows
					this.list.push(...res.result.rows)
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 取消收藏
			async submit() {
				try {
					if (this.checkboxValue.length < 1)
						return this.$showToast('请选择商品')
					let all = Promise.all(this.checkboxValue.map(goods_id => {
						return StudyApi.HandleCollectGoods({
							goods_id,
							status: 0
						})
					}))

					const p_all = await all
					this.$showToast('操作成功')
					this.show = false
					this.getList()
				} catch (e) {
					console.log(e);
					//TODO handle the exception
				}
			},
			// 全选
			hdAll(e) {
				if (e.length) {
					this.checkboxValue = this.list.map(item => item.goods_id)
				} else {
					this.checkboxValue = []
				}
			},
			async pushList() {
				try {
					if (this.checkboxValue.length < 1)
						return this.$showToast('请选择商品')
					for (let k in this.checkboxValue) {
						const item_res = await StudyApi.Goodspec({
							goods_id: this.checkboxValue[k]
						})
						const res = await StudyApi.AjaxJionCart({
							goods_num: 1,
							goods_id: this.checkboxValue[k],
							item_id: item_res.result[0]['key']
						})
						if (res.status !== 1) {
							break
						}
					}
				} catch (e) {
					this.$showToast(e)
				}
			}
		},
		onReachBottom() {
			this.p += 1
			this.getList(false)
		}

	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100vw;
		box-sizing: border-box;

		.btn {
			position: fixed;
			bottom: calc(30rpx + constant(safe-area-inset-bottom));
			bottom: calc(30rpx + env(safe-area-inset-bottom));
			left: 30rpx;
			width: 690rpx;
			height: 88rpx;
			display: flex;
			align-items: center;

			.submit {
				width: 537rpx;
				height: 88rpx;
				margin-left: 44rpx;
				line-height: 88rpx;
				border-radius: 50rpx;
				opacity: 1;
				background: linear-gradient(173.2deg, #f8b280 0%, #ff8b38 100%);
				color: #ffffff;
				text-align: center;
				font-size: 30rpx;
			}
		}

		.li-box {
			height: calc(100vh - 250rpx);
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx;
			overflow-y: auto;
		}

		.li {
			margin-bottom: 30rpx;
			width: 690rpx;
			height: 258rpx;
			border-radius: 20rpx;
			background: #ffffff;
			box-sizing: border-box;
			padding: 30rpx;
			display: flex;
			align-items: center;

			.right {
				flex: 1;

				.title {
					font-size: 30rpx;
					font-weight: 400;
				}

				.vtitle {
					color: #b2b2b2;
					text-align: left;
					font-size: 26rpx;
					font-weight: 400;
					margin: 10rpx 0;
				}

				.btitle {
					color: #b2b2b2;
					text-align: left;
					font-size: 26rpx;
					font-weight: 400;
				}
			}


			.img {
				width: 139rpx;
				height: 189rpx;
				opacity: 1;
				margin: 0 25rpx;
			}
		}

		.cancel {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #fef2e6;
			text-align: right;
			box-sizing: border-box;
			padding: 0 30rpx;
			color: #777777;
			font-size: 28rpx;
		}
	}
</style>